<template>
    <div>
        <div class="center">
            <el-input class="input" size="medium" v-model="childPostData.input" :placeholder="childPostData.inputValue"></el-input>
            <el-button @click="searchName(childPostData.input)" type="primary" size="medium" icon="el-icon-search">搜索</el-button>
            <!-- 
            <div style="margin-top: 20px">
                <span>视频分区: </span>
                <el-radio-group v-model="childPostData.radio0" size="mini">
                    <el-radio-button 
                    v-for="item in childPostData.listData0" 
                    :key="item.index" 
                    :label="item.value" >{{ item.value }}</el-radio-button>
                </el-radio-group>
            </div> -->
            <!-- 注意：下方ElementUI形式的button 不可添加点击事件
                <el-radio-button></el-radio-button> 
            -->
            <!-- <div style="margin-top: 20px">
                <span @click="initClick('所属行业')">所属行业: </span>
                <el-radio-group v-model="childPostData.radio1" size="mini">
                    <el-button 
                    v-for="item in childPostData.listData1" 
                    :key="item.index" 
                    @click="initClick(item.value)"
                    :label="item.value" >{{ item.value }}</el-button>
                </el-radio-group>
            </div> -->

            <div style="margin-top: 20px">
                <span>推广形式: </span>
                <el-radio-group v-model="childPostData.radio2" size="mini">
                    <el-button 
                    v-for="item in childPostData.listData2" 
                    :key="item.formType" 
                    :label="item.value"
                    @click="select(item.formType)"
                    >{{ item.value }}</el-button>
                </el-radio-group>
            </div>

            <!-- <div style="margin-top: 20px">
                <span>发布时间: </span>
                <el-radio-group v-model="childPostData.radio3" size="mini">
                    <el-button 
                    v-for="item in childPostData.listData3" 
                    :key="item.index" 
                    :label="item.value"
                    @click="initClick(item.value)"
                    >{{ item.value }}</el-button>
                </el-radio-group>
            </div> -->
        </div>
        <div class="bottom">
            <el-button type="primary" @click="clearFilter">清空筛选<i class="el-icon-upload el-icon--right"></i></el-button>
            <el-button type="primary" @click="exportExcel">导出Excel<i class="el-icon-upload el-icon--right"></i></el-button>
        </div>

    </div>
</template>

<script>
export default {
    components:{},
    props:{
        postData:{
            type:Object,
            default(){
                return {
                    inputValue:'',
                    // radio0:'',
                    radio1:'',
                    radio2:'',
                    radio3:'',
                    listData0:[],
                    listData1:[],
                    listData2:[],
                    listData3:[],
                }
            }
        }
    },
    watch:{
        postData(){
            this.childPostData = this.postData
            /* 
                // 知识点：
                因生命周期原因，父传子时，子组件数据更新不及时
                应用watch监听赋值数据，而非在生命周期的mounted中
            */
        }
    },
    data(){
        return {
            childPostData:{
                input: '',
                inputValue:'',
                radio0:'',
                radio1:'',
                radio2:'',
                radio3:'',
                // listData0:[],
                listData1:[],
                listData2:[],
                listData3:[],
            },
            goods:[]
        }
    },
    methods:{
        // 实验函数
        initClick(res){
            console.log('点击了init',res);
        },
        searchName(res){
            console.log('searchName',res);
        },
        clearFilter(){
            console.log('清空筛选');
        },
        exportExcel(){
            console.log('导出Excel');
        },
        initPostData(){
            this.childPostData = this.postData
        },
        
        select(val){
            let data = {
                cityname:val
            };
            this.$emit('showCityName',data)
        },
        
    },
    // 指令
    directives:{
        // 聚焦
        focus:{
            inserted(el){
                el.children[1].focus()
            }
        }
    },
    created(){
        this.initPostData()
    }
};
</script>

<style scoped >
.input{
    width: 800px;
    height: 30px;
}
.center{
    width: 100%;
    height: 160px;
    border-bottom: 1px solid black;
}
.bottom{
    display: flex;
    justify-content: flex-end;
    width: 100%;
    height: 50px;
    padding-right: 15px;
    margin: 20px;
}
</style>